import React, { Component } from 'react'
import { Layout, Menu, Icon, Dropdown, Avatar, Badge } from 'antd';
import { adminRouter } from '../../routes'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { getadminnote } from '../../actions/readnote'
import { Loginout } from '../../actions/login'
import './index.less'

const { Header, Content, Sider, Footer } = Layout;


class Frame extends Component {
  constructor() {
    super()
    this.state = {
      show: true,
      dotcount: 0
    }
  }

  Menuitem = ((key) => {


    this.props.history.push(key.key)
  })
  componentDidMount() {


    this.props.getadminnote()

  }
  render() {




    const menu = (
      <Menu onClick={(key) => {



        if (key.key == '/login') {
          console.log(this.props);
          this.props.Loginout()




        }


        this.props.history.push(key.key)



      }}>
        <Menu.Item key="/admin/notification">
          <Badge dot={this.props.notlist == 0 ? false : true}>
            通知中心
          </Badge>

        </Menu.Item>
        <Menu.Item key="/admin/settings">
          个人设置
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="/login">退出登录</Menu.Item>
      </Menu>
    );
    return (
      <Layout>
        <Header className="header" style={{
          display: 'flex',
          justifyContent: 'space-between'
        }}>
          <div className="logo logo-s" ><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3312778826,2433580215&fm=26&gp=0.jpg" alt="" /></div>

          <div>
            <Dropdown overlay={menu} trigger={['click']}>
              <Badge count={this.props.notlist}>
                <a className="ant-dropdown-link" href="#">
                  <Avatar src={this.props.userinfo.avatar} />  欢迎,{this.props.userinfo.displaynames} <Icon type="down" />
                </a>
              </Badge>

            </Dropdown>
          </div>

        </Header>
        <Layout>
          <Sider width={200} style={{ background: '#fff' }}>
            <Menu
              mode="inline"
              defaultSelectedKeys={[window.location.hash.split('#')[1]]}
              onClick={this.Menuitem.bind(this)}

              style={{ height: '100%', borderRight: 0 }}
            >


              {
                this.props.menu.map((route) => {
                  return (

                    <Menu.Item key={route.pathname}>
                      <Icon type={route.icon} />
                      {route.title}</Menu.Item>
                  )
                })
              }



            </Menu>
          </Sider>
          <Layout style={{ paddingLeft: '10px' }}>
            {/* <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>Home</Breadcrumb.Item>
                  <Breadcrumb.Item>List</Breadcrumb.Item>
                  <Breadcrumb.Item>App</Breadcrumb.Item>
                </Breadcrumb> */}
            <Content
              style={{
                background: '#fff',
                padding: 24,
                margin: 0,

              }}
            >
              {this.props.children}
            </Content>
          </Layout>
        </Layout>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    )
  }
}
const mapState = (state) => {

  return {
    notlist: state.Nottifition.List.filter(item => item.hsaRead === false).length,
    userinfo: state.Login
  }

}
export default withRouter(connect(mapState, { getadminnote, Loginout })(Frame))


